<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <meta name="generator" content="PSPad editor, www.pspad.com">
  <title></title>
    <script type="application/x-javascript">
 function drawcharacter(canvasname,posx,posy,height,bodyratio,headdistance,headradius,shoulder,waist,base,handsize,footsize) {
  var canvas = document.getElementById(canvasname);
  var ctx = canvas.getContext("2d");

   
  for (i=0;i<8;i++){
    for (j=0;j<8;j++){
      ctx.strokeStyle = 'rgb(0,' + Math.floor(255-42.5*i) + ',' + 
                       Math.floor(255-42.5*j) + ')';
      ctx.beginPath();
      ctx.arc(12.5+j*25,12.5+i*25,10,0,Math.PI*2,true);
      ctx.stroke();
    }
  }
      
  var size = 20
  var headradius = headradius*size/2;
  var headdistance = headdistance;
  
  var shoulderwidth = shoulder*size;
  var waistwidth = waist*size;
  var basewidth = base*size;
  var height = 2.5*size*height;
  var upperlowerbody = 0.5+(0.25*(0.5-bodyratio));
  
  var footsize = footsize*size/2;
  var handsize = handsize*size/3;
  
  //position
  var x = posx;
  var y = posy;
  
  //body
  var leftshoulder = {x:-shoulderwidth,y:-(height*upperlowerbody)}
  var rightshoulder = {x:+shoulderwidth,y:-(height*upperlowerbody)}
  var rightwaist = {x:+waistwidth,y:0}
  var rightbaseouter = {x:+basewidth,y:(height*(1-upperlowerbody))}
  var rightbaseinner = {x:+basewidth*(0.33),y:(height*(1-upperlowerbody))}
  var middlebase = {x:0,y:(height*(1-upperlowerbody)*0.3)}
  var leftbaseinner = {x:-basewidth*(0.33),y:(height*(1-upperlowerbody))}
  var leftbaseouter = {x:-basewidth,y:(height*(1-upperlowerbody))}
  var leftwaist = {x:-waistwidth,y:0}

  //head
  var headposition = {x:0,y:-headradius-(headdistance*(height*upperlowerbody))}  

  //hands
  var lefthandposition
  var righthandposition
  if (waistwidth<=shoulderwidth)
  {
    lefthandposition = {x:0,y:(upperlowerbody*height)+handsize}
    righthandposition = {x:0,y:(upperlowerbody*height)+handsize}
  }
  else
  {
    lefthandposition = {x:-waistwidth/2,y:(upperlowerbody*height)+handsize}
    righthandposition = {x:waistwidth/2,y:(upperlowerbody*height)+handsize}
  }
  //feet
  var leftfootposition = {x:-basewidth*0.85,y:leftbaseouter.y}
  var rightfootposition = {x:+basewidth*0.85,y:rightbaseouter.y}
  
  ctx.save()//we're going to translate
  ctx.translate(100,100)
  
  //torso
  ctx.fillStyle = "red";
  ctx.beginPath();
  ctx.moveTo(leftshoulder.x,leftshoulder.y);
  ctx.lineTo(rightshoulder.x,rightshoulder.y);
  ctx.lineTo(rightwaist.x,rightwaist.y);
  ctx.lineTo(leftwaist.x,leftwaist.y);
  ctx.lineTo(leftshoulder.x,leftshoulder.y);
  ctx.fill();

  //legs
  ctx.fillStyle = "blue";
  ctx.beginPath();
  ctx.moveTo(rightwaist.x,rightwaist.y);
  ctx.lineTo(rightbaseouter.x,rightbaseouter.y);
  ctx.lineTo(rightbaseinner.x,rightbaseinner.y);
  ctx.bezierCurveTo(rightbaseinner.x,middlebase.y,middlebase.x,middlebase.y,middlebase.x,middlebase.y);
  ctx.bezierCurveTo(middlebase.x,middlebase.y,leftbaseinner.x,middlebase.y,leftbaseinner.x,leftbaseinner.y);
  ctx.lineTo(leftbaseinner.x,leftbaseinner.y);
  ctx.lineTo(leftbaseouter.x,leftbaseouter.y);
  ctx.lineTo(leftwaist.x,leftwaist.y);
  ctx.lineTo(rightwaist.x,rightwaist.y);
  ctx.fill();
  //feet
  ctx.fillStyle = "green";
  ctx.beginPath();
  ctx.arc(leftfootposition.x,leftfootposition.y,footsize,0,Math.PI,true);
  ctx.fill();
  ctx.beginPath();
  ctx.arc(rightfootposition.x,rightfootposition.y,footsize,0,Math.PI,true);
  ctx.fill();

  ctx.save() //save state

  if(false)
  {
    //flip rendering for backview
    ctx.globalCompositeOperation = 'destination-over'
  }

  //head
  ctx.save()
  
  ctx.fillStyle = "blue";
  ctx.beginPath();
  ctx.arc(headposition.x,headposition.y,headradius,0,Math.PI*2,true);
  ctx.fill();
  ctx.restore()

  //leftarm
  ctx.save() //we will now rotate the arm
  ctx.translate(leftshoulder.x,leftshoulder.y)
  var angle = Math.atan2((shoulderwidth-waistwidth),(upperlowerbody*height))
  var rot = Math.PI
  if(angle<0)
  {
    rot +=angle*2;
  }
  //ctx.rotate(rot)
  ctx.fillStyle = "black";
  ctx.beginPath();
  ctx.moveTo(0,0)
  ctx.bezierCurveTo(-((size/2)*shoulder),(size/2),lefthandposition.x-((size/2)*handsize/(size/2)),lefthandposition.y,lefthandposition.x,lefthandposition.y)
  ctx.bezierCurveTo(lefthandposition.x+((size/2)*(handsize)/(size/2)),lefthandposition.y-(size/2),((size/2)*shoulder),(size/2),0,0)
  ctx.fill();
  ctx.fillStyle = "green";
  ctx.beginPath();
  ctx.arc(lefthandposition.x,lefthandposition.y,handsize,0,Math.PI*2,true);
  ctx.fill();
  ctx.restore()

  //rightarm
  ctx.save() //we will now rotate the arm
  ctx.translate(rightshoulder.x,rightshoulder.y)
  ctx.fillStyle = "black";
  ctx.beginPath();
  ctx.moveTo(0,0)
  ctx.bezierCurveTo((size/2*shoulder),(size/2),righthandposition.x+((size/2)*handsize/(size/2)),righthandposition.y,righthandposition.x,righthandposition.y)
  ctx.bezierCurveTo(righthandposition.x-(size/2*handsize/(size/2)),righthandposition.y-(size/2),-((size/2)*shoulder),(size/2),0,0)
  ctx.fill();
  ctx.fillStyle = "green";
  ctx.beginPath();
  ctx.arc(righthandposition.x,righthandposition.y,handsize,0,Math.PI*2,true);
  ctx.fill();
  ctx.restore()
  
  ctx.restore()//front back rendering
  ctx.restore()//translation
}
  function drawheads(canvasname)
  {
    var canvas = document.getElementById(canvasname);
    var ctx = canvas.getContext("2d");
    var headradius = 20
    var a,b,c,d;
      
    var headposition = {x:50,y:50}
   //round head
    headposition = {x:50,y:50}
    a = 1; b= 1; c=1; d=1; 
    ctx.fillStyle = "blue";
    ctx.beginPath();
    ctx.moveTo((headposition.x-headradius),(headposition.y-headradius))
    ctx.bezierCurveTo((headposition.x-headradius*a),(headposition.y-headradius*(b+1.5)),(headposition.x+headradius*a),(headposition.y-headradius*(b+1.5)),(headposition.x+headradius),(headposition.y-headradius))
    ctx.bezierCurveTo((headposition.x+headradius*c),(headposition.y+headradius*(d-0.5)),(headposition.x-headradius*c),(headposition.y+headradius*(d-0.5)),(headposition.x-headradius),(headposition.y-headradius))
    ctx.fill();

    //lowbrow head
    headposition = {x:100,y:50}
    a = 1; b= 0.5; c=1; d=1.5; 
    ctx.fillStyle = "blue";
    ctx.beginPath();
    ctx.moveTo((headposition.x-headradius),(headposition.y-headradius))
    ctx.bezierCurveTo((headposition.x-headradius*a),(headposition.y-headradius*(b+1.5)),(headposition.x+headradius*a),(headposition.y-headradius*(b+1.5)),(headposition.x+headradius),(headposition.y-headradius))
    ctx.bezierCurveTo((headposition.x+headradius*c),(headposition.y+headradius*(d-0.5)),(headposition.x-headradius*c),(headposition.y+headradius*(d-0.5)),(headposition.x-headradius),(headposition.y-headradius))
    ctx.fill();
    
    //egg head
    headposition = {x:150,y:50}
    a = 0.8; b= 1.5; c=1; d=1; 
    ctx.fillStyle = "blue";
    ctx.beginPath();
    ctx.moveTo((headposition.x-headradius),(headposition.y-headradius))
    ctx.bezierCurveTo((headposition.x-headradius*a),(headposition.y-headradius*(b+1.5)),(headposition.x+headradius*a),(headposition.y-headradius*(b+1.5)),(headposition.x+headradius),(headposition.y-headradius))
    ctx.bezierCurveTo((headposition.x+headradius*c),(headposition.y+headradius*(d-0.5)),(headposition.x-headradius*c),(headposition.y+headradius*(d-0.5)),(headposition.x-headradius),(headposition.y-headradius))
    ctx.fill();
  
  }
  
  function chatbubble(canvasname)
  {
  // Quadratric curves example
ctx.beginPath();
ctx.moveTo(75,25);
ctx.quadraticCurveTo(25,25,25,62.5);
ctx.quadraticCurveTo(25,100,50,100);
ctx.quadraticCurveTo(50,120,30,125);
ctx.quadraticCurveTo(60,120,65,100);
ctx.quadraticCurveTo(125,100,125,62.5);
ctx.quadraticCurveTo(125,25,75,25);
ctx.stroke();
}      

  </script>
  <style type="text/css">
    canvas { border: 1px solid black; }
  </style>   
  </head>
  <body onload="drawcharacter('canvas1',100,100,1.0,0.7,1.0,1.0,0.7,0.8,1.2,1.0,1.0,0);
                drawcharacter('canvas2',100,100,1.0,0.7,1.0,0.9,1.0,0.5,1.0,1.0,1.0,0);
                drawcharacter('canvas3',100,100,1.2,0.3,0.5,0.9,1.5,0.8,0.5,1.5,0.8,0);
                drawcharacter('canvas4',100,100,0.8,0.5,0.6,1.0,1.0,1.5,0.8,1.0,0.6,0);
                drawcharacter('canvas5',100,100,1.0,0.3,1.0,1.0,0.7,0.3,0.7,1.0,1.0,0);
                drawcharacter('canvas6',100,100,1.0,0.8,1.0,1.0,0.5,0.3,0.7,0.8,1.0,0);
                drawcharacter('canvas7',100,100,1.2,0.3,0.3,0.9,0.8,0.1,1.5,1.5,1.0,0);
                drawheads('canvas8');                
  ">
   <canvas id="canvas1" width="200" height="200"></canvas>
   <canvas id="canvas2" width="200" height="200"></canvas>
   <canvas id="canvas3" width="200" height="200"></canvas>
   <canvas id="canvas4" width="200" height="200"></canvas>
   <br>
   <canvas id="canvas5" width="200" height="200"></canvas>
   <canvas id="canvas6" width="200" height="200"></canvas>
   <canvas id="canvas7" width="200" height="200"></canvas>
   <canvas id="canvas8" width="200" height="200"></canvas>
  </body>
</html>
